<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表白墙</title>
		<!-- 导入 jQuery -->
		<script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			input{
				height: 30px;
				width: 250px;
			}
			td{
				height: 40px;
			}
			table {
				margin: 10px auto;
			}
			button{
				width: 325px;
				height: 40px;
				background-color: #f9a100;
				outline-color: red;
				border: none;
				color: white;
			}
			#message{
				width: 1000px;
				height: 650px;
				margin: 0 auto;
			}
		</style>
	</head>
	
	<body>
		<h1 align="center">表白墙</h1>
		<table>
			<tr>
				<td align="center" colspan="2" style="font-size: 13px;">输入后点击提交，会将信息显示在表格中</td>
				<td></td>
			</tr>
			<tr>
				<td>谁：</td>
				<td><input type="text" id="from" /></td>
			</tr>
			<tr>
				<td>对谁：</td>
				<td><input type="text" id="to"/></td>
			</tr>
			<tr>
				<td>说什么：</td>
				<td><input type="text" id="what"/></td>
			</tr>
			<tr>
				<td align="center" colspan="2"><button type="button" onclick="submit()">提交</button></td>
				<td></td>
			</tr>
		</table>
		
		<h2 align="center">留言板</h2>
		<hr/>
		<div id="message">

		</div>
		
		<script type="text/javascript">
			function submit(){
				// 获取DOM元素
				var megFrom = jQuery("#from");
				var megTo = jQuery("#to");
				var meg = jQuery("#what");
				// 信息构造
				if (megFrom.val().trim() == "" || megTo.val().trim() == "" || meg.val().trim() == "") {
					alert("信息不全，请重新输入!");
					megFrom.val("");
					megTo.val("");
					meg.val("");
					megFrom.focus();
					return;
				}
				var finalMeg ="<p>"+ megFrom.val()+"对"+megTo.val()+"说："+meg.val()+"<p/>";
				// console.log(megFrom.val()+","+megTo.val()+","+meg.val());
				// 信息发送
				jQuery(finalMeg).appendTo("#message"); 


				// 点击提交按钮时，将消息发给服务器（一定要写到清空内容上面！！！）
				let postBody = {
					from : megFrom.val(),
					to : megTo.val(),
					meg : meg.val()
				};
				$.ajax ({
					type:'post',
					url:'love2',// url使用相对路径的写法
					contentType:'application/json;charset=utf8',
					data: JSON.stringify(postBody),
					success:function(body){
						// 这里是响应成功返回之后，要调用的回调函数
						console.log("服务器发送消息成功!");
					}
				});


				// 清理输入框内容
				megFrom.val("");
				megTo.val("");
				meg.val("");
				// 重新聚焦
				megFrom.focus();
			}

			// 在页面加载时，能够从服务器获取到所有消息，并显示在网页中
			$.ajax({
				type:'get',
				url:'love2',
				success:function(body) {
					// body是收到的响应的正文部分，和我们之前的约定一样，body 应该是 json 数组
					// 由于响应的 Content-Type 是 application/json，此时收到的 body 会被 jQuery
					// 自动的把它从字符串转成js对象数组，此处就不需要手动进行JSON.parse了
					// 此处的body 已经是一个JSON.parse 之后得到的 js 对象数组了！！！
					for (let message of body) {
						// 信息构造
						var finalMeg ="<p>"+ message.from+"对"+message.to+"说："+message.meg+"<p/>";
						// 信息发送
						jQuery(finalMeg).appendTo("#message"); 
					}
				}
			});


		</script>
	</body>
</html>
